<script setup lang="ts">
import { reactive, defineAsyncComponent } from 'vue'
import Htx02 from './components/02Ref全家桶.vue'
import Htx03 from './components/04toRef.vue'
import Htx05 from './components/05Computed.vue'
import Htx06 from './components/06Watch.vue'
import Htx07 from './components/07WatchEffect高级监听.vue'
import MainView from './layout/index.vue'
import WaterFall from './components/08瀑布流.vue'
import TreeVue from './components/09递归组件.vue'
import Htx10 from './components/10动态组件.vue'
import Htx11 from './components/11插槽.vue'
// import Htx12 from './components/12异步组件.vue'
import Htx12Fallback from './components/12异步组件/D.vue'
import Htx13 from './components/13Teleport传送组件.vue'
import Htx14 from './components/14Transition组件基础用法.vue'
import Htx15 from './components/15Animate动画.vue'
import Htx16 from './components/16生命周期动画.vue'
import Htx17 from './components/17appear过度.vue'
import Htx18 from './components/18TransitionGroup列表.vue'
import Htx19 from './components/19平面过渡.vue'
import Htx20 from './components/20状态过渡.vue'
import Htx21 from './components/21依赖注入.vue'
import Htx22 from './components/22Bus事件总线.vue'
import Htx23 from './components/23Tsx'
import Htx24 from './components/24自动引入.vue'
import Htx25 from './components/25v-model解析.vue'
import Htx26 from './components/26自定义指令.vue'
import Htx28 from './components/28自定义插件.vue'
import Htx29 from './components/29h函数.vue'
import Htx30 from './components/30环境变量.vue'
import Htx31 from './components/31Pinia.vue'

// 瀑布流数据
const waterList = [
  { height: 200, background: 'red' },
  { height: 220, background: 'orange' },
  { height: 120, background: 'blue' },
  { height: 192, background: 'black' },
  { height: 28, background: 'green' },
  { height: 182, background: 'gray' },
  { height: 120, background: '#ddd' },
  { height: 98, background: 'yellow' },
  { height: 291, background: 'pink' },
  { height: 19, background: '#657eb7' },
  { height: 199, background: '#65b799' },
  { height: 110, background: '#35957f' },
  { height: 158, background: '#519535' },
  { height: 187, background: '#c5ef44' },
  { height: 239, background: '#761c1c' },
  { height: 18, background: '#3a1717' },
  { height: 37, background: '#b536b7' },
  { height: 120, background: '#ddd' },
  { height: 98, background: 'yellow' },
  { height: 291, background: 'pink' },
  { height: 19, background: '#657eb7' },
  { height: 199, background: '#65b799' },
  { height: 110, background: '#35957f' },
  { height: 158, background: '#519535' },
  { height: 187, background: '#c5ef44' },
  { height: 239, background: '#761c1c' },
  { height: 18, background: '#3a1717' },
  { height: 120, background: '#ddd' },
  { height: 98, background: 'yellow' },
  { height: 291, background: 'pink' },
  { height: 19, background: '#657eb7' },
  { height: 199, background: '#65b799' },
  { height: 110, background: '#35957f' },
  { height: 158, background: '#519535' },
  { height: 187, background: '#c5ef44' },
  { height: 239, background: '#761c1c' },
  { height: 18, background: '#3a1717' },
  { height: 37, background: '#b536b7' },
  { height: 37, background: '#b536b7' },
  { height: 98, background: 'yellow' },
  { height: 291, background: 'pink' },
  { height: 19, background: '#657eb7' },
  { height: 199, background: '#65b799' },
  { height: 110, background: '#35957f' },
  { height: 158, background: '#519535' },
  { height: 187, background: '#c5ef44' },
  { height: 239, background: '#761c1c' },
  { height: 18, background: '#3a1717' },
  { height: 37, background: '#b536b7' },
  { height: 37, background: '#b536b7' },
  { height: 98, background: 'yellow' },
  { height: 291, background: 'pink' },
  { height: 19, background: '#657eb7' },
  { height: 199, background: '#65b799' },
  { height: 110, background: '#35957f' },
  { height: 158, background: '#519535' },
  { height: 187, background: '#c5ef44' },
  { height: 239, background: '#761c1c' },
  { height: 18, background: '#3a1717' },
  { height: 37, background: '#b536b7' },
  { height: 37, background: '#b536b7' },
  { height: 98, background: 'yellow' },
  { height: 291, background: 'pink' },
  { height: 19, background: '#657eb7' },
  { height: 199, background: '#65b799' },
  { height: 110, background: '#35957f' },
  { height: 158, background: '#519535' },
  { height: 187, background: '#c5ef44' },
  { height: 239, background: '#761c1c' },
  { height: 18, background: '#3a1717' },
  { height: 37, background: '#b536b7' },
  { height: 37, background: '#b536b7' },
  { height: 98, background: 'yellow' },
  { height: 291, background: 'pink' },
  { height: 19, background: '#657eb7' },
  { height: 199, background: '#65b799' },
  { height: 110, background: '#35957f' },
  { height: 158, background: '#519535' },
  { height: 187, background: '#c5ef44' },
  { height: 239, background: '#761c1c' },
  { height: 18, background: '#3a1717' },
  { height: 37, background: '#b536b7' },
  { height: 37, background: '#b536b7' },
  { height: 98, background: 'yellow' },
  { height: 291, background: 'pink' },
  { height: 19, background: '#657eb7' },
  { height: 199, background: '#65b799' },
  { height: 110, background: '#35957f' },
  { height: 158, background: '#519535' },
  { height: 187, background: '#c5ef44' },
  { height: 239, background: '#761c1c' },
  { height: 18, background: '#3a1717' },
  { height: 37, background: '#b536b7' },
  { height: 37, background: '#b536b7' },
]

// 递归组件
interface Tree {
  name: string,
  checked: boolean,
  children?: Tree[]
}
const treeList = reactive<Tree[]>([
  {
    name: '首页',
    checked: false
  },
  {
    name: '系统设置',
    checked: true,
    children: [
      {
        name: '系统配置',
        checked: false
      },
      {
        name: '订单管理',
        checked: false
      }
    ]
  },
  {
    name: '用户管理',
    checked: false,
    children: [
      {
        name: '登录用户',
        checked: false,
      },
      {
        name: '小程序用户',
        checked: false,
        children: [
          {
            name: '图像管理',
            checked: false,
          },
          {
            name: '修改密码',
            checked: false
          }
        ]
      }
    ]
  }
])

// 异步组件
const Htx12 = defineAsyncComponent(() => import('./components/12异步组件.vue'))

// tsxFn
const tsxFn = (e: any) => {
  alert(e)
}

// 自定义hook
const Htx27 = defineAsyncComponent(() => import('./components/27自定义hook.vue'))



</script>
<template>
  <!-- <htx-02 /> -->
  <!-- <htx-03 /> -->
  <!-- <htx-05 /> -->
  <!-- <htx-06 /> -->
  <!-- <htx-07 /> -->
  <!-- <main-view /> -->
  <!-- <water-fall :items="waterList" /> -->
  <!-- <tree-vue :data="treeList"/> -->
  <!-- <Htx10 /> -->
  <!-- <Htx11 /> -->
  <!-- <Htx12 /> -->
  <!-- <Suspense>
    <Htx12 />
    <template #fallback>
      <Htx12-fallback />
    </template>
  </Suspense> -->
  <!-- <Htx13 /> -->
  <!-- <Htx14 /> -->
  <!-- <Htx15 /> -->
  <!-- <Htx16 /> -->
  <!-- <Htx17 /> -->
  <!-- <Htx18 /> -->
  <!-- <Htx19 /> -->
  <!-- <Htx20 /> -->
  <!-- <Htx21 /> -->
  <!-- <Htx22 /> -->
  <!-- <Htx23 name="李怡然" @on-click="tsxFn" /> -->
  <!-- <Htx24 /> -->
  <!-- <Htx25 /> -->
  <!-- <Htx26 /> -->
  <!-- <Suspense><Htx27 /></Suspense> -->
  <!-- <Htx28 /> -->
  <!-- <Htx29 /> -->
  <!-- <Htx30 /> -->
  <Htx31 />

</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>